<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>SVG木柴燃烧火焰动画DEMO演示</title>
  


      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
	<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  id="svg" width="400" height="800" preserveAspectRatio viewBox="0 0 400 800">
<!-- 		<g class="stick"><path fill="#755f3b" stroke="#000000" style="stroke-width: 0;" d="M17,391 60.71960788084285,387.81224876768823 81.87530614991573,393.78355757359463 111.06016833498047,390.9824894978165 146.02476279003898,394.38035989842433 176.22624981592443,397.26487968747256 209.25667207563777,397.3508444778683 239.0850989763014,393.8511616906662 236.07813329701645,439.1737284352329 205.98443854598082,435.756989366302 183.70701591322256,434.3768836402488 153.7689062626052,433.73883716659543 107.55482690655151,429.1965372336567 79.71843669741214,432.55495790066516 54.1840364387934,429.4786986787426 17,431  Z"></path><g><g><path d="M57.67166693113173,420.89753117576885 69.17301451162251,424.0280832850984 77.08594662359798,419.85760789688754 84.6567889582607,422.5163974617039 " fill="none" stroke="#4c3e26" transform="matrix(1,0,0,1,1,5)" style="stroke-width: 6.71799; stroke-linecap: round;"></path><path d="M57.67166693113173,420.89753117576885 69.17301451162251,424.0280832850984 77.08594662359798,419.85760789688754 84.6567889582607,422.5163974617039 " fill="none" stroke="#836a41" style="stroke-width: 9.35988; stroke-linecap: round;"></path><path d="M101.74611222880944,417.9244561493375 Q142.9885336569981,413.16355767393463 109.3694263011207,412.99441971237064  Z" fill="#3a5019"></path><path d="M100.70476992033223,416.0755651388457 Q88.17757321943583,412.58552197938565 107.98355652253625,412.2326790109632  Z" fill="#46611f"></path><path d="M99.69635319055196,414.7914811787417 Q117.55382146894756,414.14981816691466 109.6494958253676,412.1117340619812 " fill="none" stroke="#324516" style="stroke-width: 4;"></path><path d="M122.33350306671245,421.5813314695925 122.19401402169834,408.5358616482656 133.215325299679,395.9123397526672 123.8062437292305,387.5041403491884 " fill="none" stroke="#4c3e26" transform="matrix(1,0,0,1,1,5)" style="stroke-width: 6.96953; stroke-linecap: square;"></path><path d="M122.33350306671245,421.5813314695925 122.19401402169834,408.5358616482656 133.215325299679,395.9123397526672 123.8062437292305,387.5041403491884 " fill="none" stroke="#836a41" style="stroke-width: 8.99267; stroke-linecap: round;"></path></g><path d="M9.152721600259746,402.8540180161343 29.148537582050402,402.8540180161343 49.146559487680996,402.8540180161343 69.14256153570219,402.8540180161343 89.15264387580297,402.8540180161343 109.15162868949315,402.8545644715176 129.0527665497813,404.7804810386423 149.00057408295302,406.1070063618225 168.98933548282562,406.6781138303903 188.99131910817428,406.8540180161343 208.9792055037125,406.8540180161343 228.9808291395913,406.8540180161343 " fill="none" stroke="#836a41" style="stroke-width: 8.93462; stroke-linecap: round;"></path><path d="M1.2245984130236138,410.78214120337043 21.22041439481427,410.78214120337043 41.218436300444864,410.78214120337043 61.21443834846605,410.78214120337043 81.22452068856683,410.78214120337043 101.22350550225701,410.78268765875373 121.12464336254516,412.7086042258784 141.07245089571688,414.03512954905864 161.06121229558948,414.6062370176264 181.06319592093814,414.78214120337043 201.05108231647637,414.78214120337043 221.05270595235515,414.78214120337043 " fill="none" stroke="#755f3b" style="stroke-width: 7.77579; stroke-linecap: round;"></path><path d="M14.73120792196383,397.27553169443024 34.727023903754485,397.27553169443024 54.72504580938508,397.27553169443024 74.72104785740626,397.27553169443024 94.73113019750704,397.27553169443024 114.73011501119723,397.27607814981354 134.63125287148537,399.2019947169382 154.5790604046571,400.52852004011845 174.5678218045297,401.09962750868624 194.56980542987836,401.27553169443024 214.55769182541658,401.27553169443024 234.55931546129537,401.27553169443024 " fill="none" stroke="#836a41" style="stroke-width: 6.91865; stroke-linecap: round;"></path><path d="M91.7028824933791,400.30377939855816 111.70186730706928,400.30432585394146 131.60300516735742,402.2302424210661 151.55081270052915,403.5567677442464 171.53957410040175,404.12787521281416 191.5415577257504,404.30377939855816 211.52944412128863,404.30377939855816 231.53106775716742,404.30377939855816 " fill="none" stroke="#836a41" style="stroke-width: 8.01257; stroke-linecap: round;"></path><path d="M8.28288326537016,418.27614364897613 28.278699247160816,418.27614364897613 48.27672115279141,418.27614364897613 68.27272320081259,418.27614364897613 " fill="none" stroke="#4c3e26" style="stroke-width: 11.7425; stroke-linecap: round;"></path><path d="M70.95294304253659,401.0436365092999 90.96302538263737,401.0436365092999 110.96201019632755,401.0441829646832 130.8631480566157,402.9700995318079 150.81095558978743,404.2966248549881 170.79971698966003,404.8677323235559 190.80170061500868,405.0436365092999 210.7895870105469,405.0436365092999 230.7912106464257,405.0436365092999 " fill="none" stroke="#836a41" style="stroke-width: 6.55261; stroke-linecap: round;"></path><path d="M4.614007416914404,407.3927321994796 24.60982339870506,407.3927321994796 44.607845304335655,407.3927321994796 " fill="none" stroke="#755f3b" style="stroke-width: 6.48591; stroke-linecap: round;"></path><path d="M191.2081611179171,404.6371760063915 211.1960475134553,404.6371760063915 231.1976711493341,404.6371760063915 " fill="none" stroke="#836a41" style="stroke-width: 4.15662; stroke-linecap: round;"></path><path d="M8.329366745917845,418.3226271295238 28.3251827277085,418.3226271295238 48.323204633339095,418.3226271295238 68.31920668136027,418.3226271295238 88.32928902146105,418.3226271295238 108.32827383515124,418.3231735849071 128.22941169543938,420.2490901520318 148.1772192286111,421.57561547521203 168.1659806284837,422.1467229437798 " fill="none" stroke="#4c3e26" style="stroke-width: 10.8521; stroke-linecap: round;"></path><path d="M135.56397651140836,398.2692710770152 155.51178404458008,399.59579640019547 175.50054544445268,400.16690386876326 195.50252906980134,400.34280805450726 215.49041546533957,400.34280805450726 235.49203910121835,400.34280805450726 " fill="none" stroke="#836a41" style="stroke-width: 6.28456; stroke-linecap: round;"></path><path d="M74.75029205902656,424.7537125071901 94.76037439912734,424.7537125071901 114.75935921281753,424.7542589625734 " fill="none" stroke="#4c3e26" style="stroke-width: 9.6952; stroke-linecap: round;"></path><path d="M4.443439572698928,414.4366999563049 24.439255554489584,414.4366999563049 44.43727746012018,414.4366999563049 " fill="none" stroke="#755f3b" style="stroke-width: 6.22903; stroke-linecap: round;"></path><path d="M146.75303440075265,408.35454604402287 166.74179580062525,408.92565351259066 186.7437794259739,409.10155769833466 206.73166582151214,409.10155769833466 226.73328945739092,409.10155769833466 " fill="none" stroke="#836a41" style="stroke-width: 4.40418; stroke-linecap: round;"></path><path d="M84.84179135426008,407.1648705376772 104.84077616795027,407.1654169930605 124.74191402823841,409.09133356018515 " fill="none" stroke="#836a41" style="stroke-width: 7.94203; stroke-linecap: round;"></path><path d="M4.526374969162468,407.48036464723157 24.522190950953124,407.48036464723157 44.52021285658372,407.48036464723157 64.51621490460491,407.48036464723157 " fill="none" stroke="#755f3b" style="stroke-width: 10.1163; stroke-linecap: round;"></path><path d="M113.24730416588338,398.7588889951274 133.14844202617152,400.68480556225205 153.09624955934325,402.0113308854323 173.08501095921585,402.5824383540001 193.0869945845645,402.7583425397441 213.07488098010273,402.7583425397441 233.07650461598152,402.7583425397441 " fill="none" stroke="#836a41" style="stroke-width: 5.38027; stroke-linecap: round;"></path><path d="M5.034909590665741,406.9718300257283 25.030725572456397,406.9718300257283 45.02874747808699,406.9718300257283 65.02474952610817,406.9718300257283 85.03483186620895,406.9718300257283 " fill="none" stroke="#755f3b" style="stroke-width: 4.98323; stroke-linecap: round;"></path><path d="M121.0180494315271,412.81519815689643 140.96585696469884,414.1417234800767 160.95461836457144,414.71283094864447 180.9566019899201,414.88873513438847 200.94448838545833,414.88873513438847 220.94611202133711,414.88873513438847 " fill="none" stroke="#755f3b" style="stroke-width: 11.7995; stroke-linecap: round;"></path><path d="M5.108347667949268,415.1016080515552 25.104163649739924,415.1016080515552 45.10218555537052,415.1016080515552 65.0981876033917,415.1016080515552 85.10826994349247,415.1016080515552 105.10725475718266,415.1021545069385 " fill="none" stroke="#755f3b" style="stroke-width: 8.51198; stroke-linecap: round;"></path><path d="M125.53608680878816,408.29716077963536 145.48389434195988,409.6236861028156 165.47265574183248,410.1947935713834 185.47463936718114,410.3706977571274 205.46252576271937,410.3706977571274 225.46414939859815,410.3706977571274 " fill="none" stroke="#755f3b" style="stroke-width: 8.9925; stroke-linecap: round;"></path><path d="M70.36228534578214,420.36570579394566 90.37236768588292,420.36570579394566 110.3713524995731,420.36625224932897 " fill="none" stroke="#4c3e26" style="stroke-width: 6.3383; stroke-linecap: round;"></path><path d="M6.815658577641969,405.1910810387521 26.811474559432625,405.1910810387521 46.80949646506322,405.1910810387521 " fill="none" stroke="#836a41" style="stroke-width: 8.5923; stroke-linecap: round;"></path></g><g><ellipse cx="242" cy="415" rx="13.333333333333334" ry="20" fill="#937b55"></ellipse><ellipse cx="242" cy="415" rx="2" ry="3" fill="#836a41" style="opacity: 0.189143;"></ellipse><path d="M245,405 Q248.77903082626315,405 250.7521767727837,415 Q250.46103273139653,425 242,425 Q234.90861447277217,425 232.30100345738043,415" fill="none" stroke="#836a41" style="stroke-width: 2.26464;"></path></g><g><path d="M76.97111638666773,395.02546316516873 96.98119872676851,395.02546316516873 116.9801835404587,395.02600962055203 136.88132140074686,396.9519261876767 156.82912893391858,398.27845151085694 176.81789033379118,398.8495589794247 196.81987395913984,399.02546316516873 216.80776035467807,399.02546316516873 236.80938399055685,399.02546316516873 " fill="none" stroke="#836a41" style="stroke-width: 8.14814; stroke-linecap: round;"></path><path d="M5.900412252280923,415.8936726358869 25.89622823407158,415.8936726358869 45.89425013970217,415.8936726358869 " fill="none" stroke="#755f3b" style="stroke-width: 7.0365; stroke-linecap: round;"></path><path d="M2.972305670696933,409.0344339456971 22.96812165248759,409.0344339456971 42.96614355811818,409.0344339456971 62.962145606139366,409.0344339456971 82.97222794624014,409.0344339456971 102.97121275993032,409.0349804010804 122.87235062021847,410.9608969682051 142.8201581533902,412.2874222913853 162.8089195532628,412.8585297599531 182.81090317861145,413.0344339456971 202.79878957414968,413.0344339456971 222.80041321002847,413.0344339456971 " fill="none" stroke="#836a41" style="stroke-width: 11.0639; stroke-linecap: round;"></path><path d="M171.4835782554492,404.18387105776674 191.48556188079786,404.35977524351074 211.4734482763361,404.35977524351074 231.47507191221487,404.35977524351074 " fill="none" stroke="#836a41" style="stroke-width: 11.8761; stroke-linecap: round;"></path><path d="M113.07073861571254,423.06563836546843 132.9718764760007,424.9915549325931 152.9196840091724,426.31808025577334 " fill="none" stroke="#4c3e26" style="stroke-width: 7.16697; stroke-linecap: round;"></path><path d="M1.816493483894817,410.1902461324992 21.812309465685473,410.1902461324992 41.81033137131607,410.1902461324992 61.80633341933725,410.1902461324992 81.81641575943803,410.1902461324992 " fill="none" stroke="#755f3b" style="stroke-width: 6.57671; stroke-linecap: round;"></path><path d="M173.47853277999462,402.1889165332213 193.48051640534328,402.3648207189653 213.4684028008815,402.3648207189653 233.4700264367603,402.3648207189653 " fill="none" stroke="#836a41" style="stroke-width: 7.73577; stroke-linecap: round;"></path><path d="M116.05372498007237,395.95246818093835 135.95486284036053,397.878384748063 155.90267037353226,399.20491007124326 " fill="none" stroke="#836a41" style="stroke-width: 11.2399; stroke-linecap: round;"></path><path d="M10.376001445650054,401.630738170744 30.37181742744071,401.630738170744 50.369839333071305,401.630738170744 70.36584138109248,401.630738170744 90.37592372119326,401.630738170744 " fill="none" stroke="#836a41" style="stroke-width: 4.84219; stroke-linecap: round;"></path><path d="M174.2313721896819,428.212114504978 194.23335581503056,428.388018690722 214.2212422105688,428.388018690722 234.22286584644758,428.388018690722 " fill="none" stroke="#4c3e26" style="stroke-width: 11.5025; stroke-linecap: round;"></path><path d="M3.156035286536259,408.85070432985776 23.151851268326915,408.85070432985776 43.14987317395751,408.85070432985776 63.14587522197869,408.85070432985776 83.15595756207946,408.85070432985776 103.15494237576965,408.85125078524106 123.0560802360578,410.7771673523657 143.00388776922952,412.103692675546 " fill="none" stroke="#755f3b" style="stroke-width: 10.418; stroke-linecap: round;"></path><path d="M102.86292066175366,409.1432724992571 122.76405852204181,411.06918906638174 142.71186605521353,412.395714389562 162.70062745508613,412.9668218581298 182.7026110804348,413.1427260438738 202.69049747597302,413.1427260438738 222.6921211118518,413.1427260438738 " fill="none" stroke="#755f3b" style="stroke-width: 11.4633; stroke-linecap: round;"></path><path d="M13.643168884871137,423.6364292684771 33.638984866661794,423.6364292684771 53.63700677229239,423.6364292684771 73.63300882031356,423.6364292684771 93.64309116041434,423.6364292684771 " fill="none" stroke="#4c3e26" style="stroke-width: 4.96297; stroke-linecap: round;"></path><path d="M67.19587048767059,404.80070906416586 87.20595282777137,404.80070906416586 107.20493764146156,404.80125551954916 127.1060755017497,406.7271720866738 147.05388303492143,408.05369740985407 167.04264443479403,408.62480487842186 187.04462806014268,408.80070906416586 207.0325144556809,408.80070906416586 227.0341380915597,408.80070906416586 " fill="none" stroke="#836a41" style="stroke-width: 10.7748; stroke-linecap: round;"></path><path d="M13.664394007405392,398.34234560898864 33.66020998919605,398.34234560898864 53.65823189482664,398.34234560898864 " fill="none" stroke="#836a41" style="stroke-width: 11.7482; stroke-linecap: round;"></path><path d="M114.15880455727287,424.1537043070287 134.05994241756102,426.07962087415336 154.00774995073274,427.4061461973336 173.99651135060535,427.9772536659014 193.998494975954,428.1531578516454 213.98638137149223,428.1531578516454 233.98800500737102,428.1531578516454 " fill="none" stroke="#4c3e26" style="stroke-width: 10.4804; stroke-linecap: round;"></path><path d="M10.887844334330737,420.8811047179367 30.883660316121393,420.8811047179367 50.88168222175199,420.8811047179367 70.87768426977317,420.8811047179367 90.88776660987395,420.8811047179367 " fill="none" stroke="#4c3e26" style="stroke-width: 9.12144; stroke-linecap: round;"></path><path d="M147.11578643582104,420.51418268242196 167.10454783569364,421.08529015098975 187.1065314610423,421.26119433673375 207.09441785658052,421.26119433673375 227.0960414924593,421.26119433673375 " fill="none" stroke="#4c3e26" style="stroke-width: 4.40692; stroke-linecap: round;"></path><path d="M12.788544465918505,422.78180484952446 32.78436044770916,422.78180484952446 52.782382353339756,422.78180484952446 72.77838440136094,422.78180484952446 92.78846674146172,422.78180484952446 112.7874515551519,422.78235130490776 132.68858941544005,424.7082678720324 " fill="none" stroke="#4c3e26" style="stroke-width: 5.58094; stroke-linecap: round;"></path><path d="M84.22311680084641,407.78354509109084 104.2221016145366,407.78409154647414 124.12323947482474,409.7100081135988 144.07104700799647,411.03653343677905 164.05980840786907,411.60764090534684 184.06179203321773,411.78354509109084 204.04967842875595,411.78354509109084 224.05130206463474,411.78354509109084 " fill="none" stroke="#755f3b" style="stroke-width: 8.5267; stroke-linecap: round;"></path><path d="M11.585462193316573,400.42127742307747 31.58127817510723,400.42127742307747 51.57930008073782,400.42127742307747 71.575302128759,400.42127742307747 " fill="none" stroke="#836a41" style="stroke-width: 9.4; stroke-linecap: round;"></path><path d="M85.41728084004072,415.4106189481035 105.4162656537309,415.4111654034868 125.31740351401905,417.33708197061145 145.26521104719077,418.6636072937917 165.25397244706338,419.2347147623595 185.25595607241203,419.4106189481035 205.24384246795026,419.4106189481035 225.24546610382905,419.4106189481035 " fill="none" stroke="#755f3b" style="stroke-width: 4.50858; stroke-linecap: round;"></path><path d="M10.65246012179567,420.64572050540164 30.648276103586326,420.64572050540164 50.64629800921692,420.64572050540164 70.6423000572381,420.64572050540164 " fill="none" stroke="#4c3e26" style="stroke-width: 10.5812; stroke-linecap: round;"></path><g></g></g></g> -->
	</svg>
</div>
<script src='js/snap.svg-min.js'></script>
<script src='js/TweenMax.min.js'></script>
<script src='js/jquery.min.js'></script>
<script  src="js/index.js"></script>
</body>

</html>
